
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {margin:0; padding:0;}
li{list-style:none; }

#div1 {width:850px; height:500px; margin:50px auto; overflow:hidden; position:relative;}
#div1 ul li{height:500px;opacity: 0;position: absolute;left: 0;top: 0;z-index: 0;transition: opacity 1.5s;}
#div1 ul li.ac{z-index: 5;opacity: 1;}
#div1 ol {position:absolute;right: 10%;bottom: 10px;z-index:6}
#div1 ol li{width: 20px;height: 20px;background: #fff;margin-left: 5px;float: left;line-height: 20px;text-align: center;cursor: pointer;}
#div1 ol li.ac{background: red;color: #fff;}
#div1>a{text-decoration: none;position: absolute;top: 50%;margin-top: -10px;height: 40px;line-height: 32px;text-align: center;width: 40px;font-size: 40px;vertical-align: middle;color: #fff;background: rgba(0,0,0,0.5);z-index:6;}
#goPrev{left: 0;}
#goNext{right: 0;}
img{width:850px; height:500px;}
</style>
</head>

<body>
<div id="div1">
	<ul>
    	<li class="ac"><a href="javascript:alert(0);"><img src="1.jpg" /></a></li>
    	<li><a href="javascript:alert(1);"><img src="2.jpg" /></a></li>
    	<li><a href="javascript:alert(2);"><img src="3.jpg" /></a></li>
    	<li><a href="javascript:alert(3);"><img src="4.jpg" /></a></li>
    	<li><a href="javascript:alert(4);"><img src="5.jpg" /></a></li>
    </ul>
    <ol>
    	<li class="ac">1</li>
    	<li>2</li>
    	<li>3</li>
    	<li>4</li>
    	<li>5</li>
    </ol>
    <a href="javascript:;" id="goPrev">&laquo;</a>
    <a href="javascript:;" id="goNext">&raquo;</a>
</div>
<script>
    var div = document.querySelector('#div1')
    var imgs = div.querySelectorAll('ul li')
    var btns = div.querySelectorAll('ol li')
    var goPrev = document.querySelector('#goPrev')
    var goNext = document.querySelector('#goNext')
    //上一张图片的索引
    var lastindex = 0 
    //当前图片的索引
    var index = 0

    //按钮点击切换
    btns.forEach((btn,i) => {
      btn.onclick = function () {
        lastindex = index
        index = i
        changeImg()
      }
    })
    //向前  左边点击按钮
    goPrev.onclick = function () {
      lastindex = index
      index--
      //当index的索引小于0是，索引自动跳转到索引的最后一个
      if(index < 0) index = imgs.length - 1
      changeImg()
    }
    //向后 右边点击按钮
    goNext.onclick = function () {
      lastindex = index
      index++
      //当index的索引等于索引的长度时，索引自动跳转到第一个
      if(index === imgs.length) index = 0
      changeImg()
    }
    //轮播图自动切换
    function auto () {
      div.timer = setInterval(()=> {
        goNext.onclick()
      },1000)
    }
    auto()
    //当鼠标移到轮播图上是，轮播图停止播放
    div.onmouseenter = function () {
      clearInterval(div.timer)
    }
    // div.onmouseleave = function () {
    //   auto()
    //   console.log(auto())
    // }
      //当鼠标移出轮播图时 调用auto这个函数达到自动播放，在省略不写函数时auto函数后面的()也不写
    div.onmouseleave = auto

    function changeImg () {
        btns[lastindex].classList.remove('ac')
        btns[index].classList.add('ac')
        imgs[lastindex].classList.remove('ac')
        imgs[index].classList.add('ac')
    }
</script>
</body>
</html>
